<template>
  <div class="common-layout">
    <el-tree :data="sidebarList" node-key="id" default-expand-all :expand-on-click-node="false">
      <template #default="{data}">
        <span class="custom-tree-node">
          <span>{{data.indexName }}</span>
          <span>
            <a @click="edit(data)">编辑</a>
            <!-- <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a> -->
          </span>
        </span>
      </template>
    </el-tree>
    <el-dialog v-model="dialogFormVisible" :title="'菜单编辑'">
      <el-form :model="form">
        <el-form label-width="220px" :model="form">
          <el-form-item label="id">
            <el-input disabled v-model="form.id" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="parentId">
            <el-input disabled v-model="form.parentId" style="width:220px"></el-input>
          </el-form-item>
           <el-form-item label="indexSort">
            <el-input v-model="form.indexSort" style="width:220px"></el-input>
          </el-form-item>
       
          <el-form-item label="indexName">
            <el-input v-model="form.indexName" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="indexLevel">
            <el-input disabled v-model="form.indexLevel" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="indexType">
            <el-input disabled v-model="form.indexType" style="width:220px"></el-input>
          </el-form-item>
           <el-form-item label="indexImg">
            <el-input v-model="form.indexImg" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="indexTitle">
            <el-input v-model="form.indexTitle" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="indexContent">
            <el-input v-model="form.indexContent" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="path">
            <el-input v-model="form.path" style="width:220px"></el-input>
          </el-form-item>
          <el-form-item label="path1">
            <el-input v-model="form.path1" style="width:220px"></el-input>
          </el-form-item>
        </el-form>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getMenuList, addOrUpdateMenu } from "@/api/PC-Home.js";
export default {
  computed: {},
  data() {
    return {
      sidebarList: [],
      dialogFormVisible: false,
      form: {
        id: "",
        parentId: "",
        indexSort: "",
        indexName: "",
        indexLevel: "",
        indexType: "",
        indexImg: null,
        indexTitle: "",
        indexContent: null,
        path: "",
        path1: null
      }
    };
  },
  mounted() {
    this.getMenuList();
  },

  methods: {
    getMenuList() {
      this.sidebarList = [];
      getMenuList().then(res => {
        console.log(res);
        this.sidebarList = res.data;
        // this.sidebarList.map((item)=>{
        //     item.label = item.indexName
        //     item.id = Number(item.id)
        //     if(item.children && item.children.lenght>0){
        //         item.childre.map((items) => {
        //             items.label = items.indexName
        //             items.id = Number(items.id)
        //         })
        //     }
        // })
      });
    },
    edit(data) {
        this.form = {
        id: data.id,
        parentId: data.parentId,
        indexSort: data.indexSort,
        indexName: data.indexName,
        indexLevel: data.indexLevel,
        indexType: data.indexType,
        indexImg: data.indexImg,
        indexTitle: data.indexTitle,
        indexContent: data.indexContent,
        path: data.path,
        path1: data.path1
      }
      this.dialogFormVisible = true;
    },
    submit() {
      let formMart = null;
      formMart = new FormData();
      formMart.append("file", "");
      formMart.append("id", this.form.id ? this.form.id : "");
      formMart.append("parentId", this.form.parentId);
      formMart.append("indexSort", this.form.indexSort);
      formMart.append("indexName", this.form.indexName);
      formMart.append("indexLevel", this.form.indexLevel);
      formMart.append("indexType", this.form.indexType);
      formMart.append("indexImg", this.form.indexImg);
      formMart.append("indexTitle", this.form.indexTitle);
      formMart.append("indexContent", this.form.indexContent);
      formMart.append("path", this.form.path);
      formMart.append("path1", this.form.path1);
      addOrUpdateMenu(formMart).then(res => {
        if (res.code === 200) {
          this.$message.success("上传成功");
          this.dialogFormVisible = false;
          this.getMenuList()
        } else {
          this.$message.error(res.message);
        }
      });
    },
  }
};
</script>
<style scoped lang="scss">
.common-layout {
  width: 100%;
  height: 100%;

  ::v-deep .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>